<script setup>
import { ref, onMounted, reactive, computed } from 'vue';
import axios from "axios";

// 消息提示相关
const notifications = ref([]);
let notificationId = 0;

// 显示消息提示
const showNotification = (message, type = 'info', duration = 3000) => {
  const id = notificationId++;
  notifications.value.push({
    id,
    message,
    type, // info, success, warning, error
    visible: true
  });

  // 自动关闭
  setTimeout(() => {
    closeNotification(id);
  }, duration);
};

// 关闭消息提示
const closeNotification = (id) => {
  const index = notifications.value.findIndex(notification => notification.id === id);
  if (index !== -1) {
    notifications.value[index].visible = false;
    // 动画结束后移除元素
    setTimeout(() => {
      notifications.value = notifications.value.filter(notification => notification.id !== id);
    }, 300);
  }
};

// 轮播图数据
const carouselData = reactive([
  {
    id: 1,
    image: 'https://picsum.photos/id/154/1920/1080',
    title: '探索无尽的奇幻世界',
    description: '加入 Epic Quest，开启一段前所未有的冒险旅程，与伙伴们一起挑战强大的敌人，解锁神秘的宝藏。',
    cta1: { text: '立即开始', link: '#download' },
    cta2: { text: '了解更多', link: '#about' }
  },
  {
    id: 2,
    image: 'https://picsum.photos/id/237/1920/1080',
    title: '全新职业震撼登场',
    description: '暗影刺客降临，带来全新技能与玩法，让你的战斗策略更加丰富多样，体验不一样的战斗快感。',
    cta1: { text: '查看更新', link: '#updates' },
    cta2: { text: '最新公告', link: '#news' }
  },
  {
    id: 3,
    image: 'https://picsum.photos/id/110/1920/1080',
    title: '跨服竞技谁与争锋',
    description: '全新跨服战场开启，集结你的团队，与来自全国各地的玩家一决高下，赢取专属荣耀奖励。',
    cta1: { text: '赛事详情', link: '#news' },
    cta2: { text: '立即参与', link: '#download' }
  }
]);

// 游戏介绍数据
const gameFeatures = reactive([
  {
    icon: 'users',
    title: '多样职业选择',
    description: '5大职业体系，数十种技能组合，打造专属你的战斗风格'
  },
  {
    icon: 'map-o',
    title: '广阔开放世界',
    description: '无缝衔接的庞大地图，隐藏着无数秘密和宝藏等待发现'
  },
  {
    icon: 'shield',
    title: '团队协作挑战',
    description: '多人副本与团队任务，考验默契与策略的终极挑战'
  },
  {
    icon: 'trophy',
    title: '竞技与荣耀',
    description: '公平竞技系统，展示实力，赢取属于你的荣耀与奖励'
  }
]);

// 游戏数据统计
const gameStatistics = ref({});

// 更新日志数据
const updateLogs = ref({
  latest: [],
  major: [],
  balance: []
});

// 游戏公告数据
const gameNews = reactive([
  {
    id: 1,
    title: '夏日狂欢活动开启，多重好礼等你拿',
    date: '2023-06-20',
    category: '新活动',
    categoryClass: 'event',
    image: 'https://picsum.photos/id/235/600/400',
    summary: '随着夏日的到来，游戏内将开启为期一个月的夏日狂欢活动。完成每日任务即可获得限定道具，累计登录还能领取稀有时装和坐骑。'
  },
  {
    id: 2,
    title: '关于6月22日系统维护的公告',
    date: '2023-06-18',
    category: '维护公告',
    categoryClass: 'maintenance',
    image: 'https://picsum.photos/id/111/600/400',
    summary: '为了给玩家提供更好的游戏体验，我们将于6月22日凌晨2:00-6:00进行系统维护，届时游戏将无法登录。维护完成后，所有玩家将获得维护补偿。'
  },
  {
    id: 3,
    title: '第一届"Epic Quest"全国挑战赛报名启动',
    date: '2023-06-15',
    category: '赛事信息',
    categoryClass: 'tournament',
    image: 'https://picsum.photos/id/133/600/400',
    summary: '首届全国挑战赛将于7月15日正式开赛，总奖金池高达100万元。比赛采用3v3团队赛形式，即日起至7月1日接受报名，欢迎各位玩家踊跃参与。'
  }
]);

// 状态管理
const currentSlide = ref(0);
const activeUpdateTab = ref('normal');
const isMobileMenuOpen = ref(false);
const navbarScrolled = ref(false);
const isLoading = ref(true); // 添加加载状态

// 分页控制 - 为每个标签页维护独立的可见数量
const visibleCounts = ref({
  normal: 5,
  major: 5,
  balance: 5
});

// 轮播图控制
const nextSlide = () => {
  currentSlide.value = (currentSlide.value + 1) % carouselData.length;
};

const goToSlide = (index) => {
  currentSlide.value = index;
};

// 自动轮播
onMounted(() => {
  // 加载数据
  loadUpdateLogs();
  loadGameStatistics();

  const interval = setInterval(nextSlide, 5000);

  // 监听滚动事件
  window.addEventListener('scroll', () => {
    navbarScrolled.value = window.scrollY > 50;
  });

  // 数字动画
  const animateCounters = () => {
    const counters = document.querySelectorAll('.stat-counter');
    counters.forEach(counter => {
      const target = +counter.getAttribute('data-target');
      const duration = 2000; // 动画持续时间（毫秒）
      const step = target / (duration / 16); // 每16ms的步长
      let current = 0;

      const updateCounter = () => {
        current += step;
        if (current < target) {
          counter.textContent = Math.ceil(current).toLocaleString();
          requestAnimationFrame(updateCounter);
        } else {
          counter.textContent = target.toLocaleString();
        }
      };

      updateCounter();
    });
  };

  // 当元素进入视口时触发动画
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        animateCounters();
        observer.disconnect();
      }
    });
  }, { threshold: 0.5 });

  const statsSection = document.querySelector('.game-stats');
  if (statsSection) observer.observe(statsSection);

  return () => clearInterval(interval);
});

// 加载更新日志数据
const loadUpdateLogs = async () => {
  try {
    isLoading.value = true; // 开始加载
    console.log('页面初始化，加载更新日志');
    const response = await axios.get('/api/news/update-log/all');

    if (response.status === 200 && response.data.code === 1) {
      console.log('日志数据加载成功', response.data);
      if (response.data.data) {
        // 处理日期：仅保留年月日（切割掉T及后面的内容）
        const formattedLatest = response.data.data.latest.map(log => ({
          ...log,
          date: log.date.split('T')[0]  // 核心：用T分割字符串，取前半部分
        }));
        const formattedMajor = response.data.data.major.map(log => ({
          ...log,
          date: log.date.split('T')[0]  // 核心：用T分割字符串，取前半部分
        }));
        const formattedBalance = response.data.data.balance.map(log => ({
          ...log,
          date: log.date.split('T')[0]  // 核心：用T分割字符串，取前半部分
        }));

        updateLogs.value = {
          latest: formattedLatest,
          major: formattedMajor,
          balance: formattedBalance
        };

        showNotification('更新日志加载成功', 'success');
      }
    } else {
      showNotification('数据加载失败: ' + (response.data?.message || '未知错误'), 'error');
    }
  } catch (error) {
    console.error('加载日志出错', error);
    showNotification('数据加载失败: ' + (error.message || '网络错误'), 'error');
  } finally {
    isLoading.value = false;
  }
}

// 加载游戏统计数据
const loadGameStatistics = async () => {
  try {
    isLoading.value = true; // 启动加载
    console.log('页面初始化，加载游戏统计数据');
    const response = await axios.get('/api/news/game-statistic/all');
    console.log('响应数据:', response.data);
    if (response.status === 200 && response.data.code === 1) {
      console.log('统计数据加载成功', response.data);
      if (response.data.data) {
        gameStatistics.value = response.data.data;
        showNotification('游戏统计数据加载成功', 'success');
      }
    } else {
      showNotification('数据加载失败: ' + (response.data?.message || '未知错误'), 'error');
    }
  } catch (error) {
    console.error('加载统计数据出错', error);
    showNotification('数据加载失败: ' + (error.message || '网络错误'), 'error');
  } finally {
    isLoading.value = false;
  }
}

// 切换更新日志标签
const switchUpdateTab = (tab) => {
  activeUpdateTab.value = tab;
};

// 加载更多更新记录
const loadMoreUpdates = (tab) => {
  visibleCounts.value[tab] += 5;
  showNotification('已加载更多内容', 'info');
};

// 计算当前标签页需要显示的更新
const filteredUpdates = computed(() => {
  // 确保当前标签页数据存在，避免undefined错误
  const tabData = updateLogs.value[activeUpdateTab.value] || [];
  return tabData.slice(0, visibleCounts.value[activeUpdateTab.value]);
});

// 检查当前标签页是否有数据
const hasTabData = computed(() => {
  const tabData = updateLogs.value[activeUpdateTab.value] || [];
  return tabData.length > 0;
});

// 切换移动菜单
const toggleMobileMenu = () => {
  isMobileMenuOpen.value = !isMobileMenuOpen.value;
};

// 平滑滚动
const scrollToSection = (id) => {
  const element = document.getElementById(id);
  if (element) {
    element.scrollIntoView({ behavior: 'smooth' });
    isMobileMenuOpen.value = false; // 关闭移动菜单
  } else {
    showNotification('未找到指定区域', 'warning');
  }
};
</script>

<template>
  <div class="app-container">
    <!-- 导航栏 -->
    <header
        class="navbar"
        :class="{ 'navbar-scrolled': navbarScrolled }"
    >
      <div class="container">
        <div class="navbar-content">
          <div class="logo">
            <div class="logo-icon">
              <i class="fa fa-gamepad"></i>
            </div>
            <span class="logo-text">Epic Quest</span>
          </div>

          <!-- 桌面导航 -->
          <nav class="desktop-nav">
            <ul>
              <li @click="scrollToSection('home')" class="nav-item active">首页</li>
              <li @click="scrollToSection('about')" class="nav-item">游戏介绍</li>
              <li @click="scrollToSection('updates')" class="nav-item">更新日志</li>
              <li @click="scrollToSection('news')" class="nav-item">游戏公告</li>
              <li @click="scrollToSection('download')" class="nav-item">游戏下载</li>
            </ul>
          </nav>

          <div class="navbar-actions">
            <button
                class="user-center-btn"
                @click="scrollToSection('user-center')"
            >
              <i class="fa fa-user"></i> 账号中心
            </button>
            <button
                class="download-btn"
                @click="scrollToSection('download')"
            >
              <i class="fa fa-download"></i> 立即下载
            </button>

            <!-- 移动端菜单按钮 -->
            <button class="mobile-menu-btn" @click="toggleMobileMenu">
              <i class="fa" :class="isMobileMenuOpen ? 'fa-times' : 'fa-bars'"></i>
            </button>
          </div>
        </div>
      </div>

      <!-- 移动端导航菜单 -->
      <div class="mobile-nav" v-if="isMobileMenuOpen">
        <ul>
          <li @click="scrollToSection('home')" class="mobile-nav-item">首页</li>
          <li @click="scrollToSection('about')" class="mobile-nav-item">游戏介绍</li>
          <li @click="scrollToSection('updates')" class="mobile-nav-item">更新日志</li>
          <li @click="scrollToSection('news')" class="mobile-nav-item">游戏公告</li>
          <li @click="scrollToSection('download')" class="mobile-nav-item">游戏下载</li>
          <li @click="scrollToSection('user-center')" class="mobile-nav-item">
            <i class="fa fa-user"></i> 账号中心
          </li>
        </ul>
      </div>
    </header>

    <main>
      <!-- 宣传轮播图区域 -->
      <section id="home" class="carousel-section">
        <div class="carousel-container">
          <div
              class="carousel-slide"
              v-for="(slide, index) in carouselData"
              :key="slide.id"
              :class="{ 'active': index === currentSlide }"
          >
            <div class="slide-overlay"></div>
            <img :src="slide.image" :alt="'游戏宣传图' + (index + 1)" class="slide-image">
            <div class="slide-content">
              <h1 class="slide-title">{{ slide.title }}</h1>
              <p class="slide-description">{{ slide.description }}</p>
              <div class="slide-cta">
                <button @click="scrollToSection(slide.cta1.link.slice(1))" class="cta-primary">
                  {{ slide.cta1.text }}
                </button>
                <button @click="scrollToSection(slide.cta2.link.slice(1))" class="cta-secondary">
                  {{ slide.cta2.text }}
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- 轮播指示器 -->
        <div class="carousel-indicators">
          <button
              class="indicator"
              v-for="(slide, index) in carouselData"
              :key="slide.id"
              :class="{ 'active': index === currentSlide }"
              @click="goToSlide(index)"
          ></button>
        </div>

        <!-- 向下滚动提示 -->
        <button class="scroll-down" @click="scrollToSection('about')">
          <i class="fa fa-angle-down"></i>
        </button>
      </section>

      <!-- 游戏介绍 -->
      <section id="about" class="about-section">
        <div class="container">
          <div class="section-header">
            <h2 class="section-title">游戏介绍</h2>
            <div class="section-divider"></div>
            <p class="section-subtitle">踏入一个充满魔法与冒险的世界，选择你的职业，与伙伴们一起探索未知的领域，挑战强大的敌人。</p>
          </div>

          <div class="about-content">
            <div class="about-text">
              <h3 class="about-title">史诗般的冒险旅程</h3>
              <p class="about-description">
                《Epic Quest》是一款开放世界奇幻冒险游戏，玩家将在广阔的艾瑞亚大陆上展开一段史诗般的旅程。从绿意盎然的精灵森林到火山环绕的熔岩地带，从繁华的王国都城到神秘的地下遗迹，每个区域都充满了未知与挑战。
              </p>

              <div class="features-grid">
                <div class="feature-card" v-for="(feature, index) in gameFeatures" :key="index">
                  <div class="feature-icon">
                    <i class="fa fa-{{ feature.icon }}"></i>
                  </div>
                  <h4 class="feature-title">{{ feature.title }}</h4>
                  <p class="feature-desc">{{ feature.description }}</p>
                </div>
              </div>

              <button class="learn-more" @click="scrollToSection('news')">
                了解更多游戏特色 <i class="fa fa-long-arrow-right"></i>
              </button>
            </div>

            <div class="about-image">
              <img src="https://picsum.photos/id/160/800/600" alt="游戏截图" class="main-image">
              <div class="image-glow glow-1"></div>
              <div class="image-glow glow-2"></div>
            </div>
          </div>
        </div>
      </section>

      <!-- 游戏数据概览 -->
      <section class="game-stats">
        <div class="container">
          <div class="stats-grid">
            <div class="stat-item" v-for="(stat, index) in gameStatistics" :key="index">
              <div class="stat-value stat-counter" :data-target="stat.value">0</div>
              <p class="stat-label">{{ stat.label }}</p>
            </div>
          </div>
        </div>
      </section>

      <!-- 更新日志 -->
      <section id="updates" class="updates-section">
        <div class="container">
          <div class="section-header">
            <h2 class="section-title">更新日志</h2>
            <div class="section-divider"></div>
            <p class="section-subtitle">持续优化游戏体验，不断推出新内容，让你的冒险更加精彩。</p>
          </div>

          <!-- 更新标签页 -->
          <div class="updates-tabs">
            <button
                class="update-tab"
                :class="{ 'active': activeUpdateTab === 'normal' }"
                @click="switchUpdateTab('normal')"
            >
              常规更新
            </button>
            <button
                class="update-tab"
                :class="{ 'active': activeUpdateTab === 'major' }"
                @click="switchUpdateTab('major')"
            >
              重大更新
            </button>
            <button
                class="update-tab"
                :class="{ 'active': activeUpdateTab === 'balance' }"
                @click="switchUpdateTab('balance')"
            >
              平衡调整
            </button>
          </div>

          <!-- 更新内容 -->
          <div class="updates-content">
            <!-- 加载状态 -->
            <div class="loading-state" v-if="isLoading">
              <div class="spinner"></div>
              <p>正在加载更新日志...</p>
            </div>

            <!-- 无数据状态 -->
            <div class="no-data" v-else-if="!hasTabData">
              <i class="fa fa-file-text-o"></i>
              <h3>暂无相关更新记录</h3>
              <p>当前分类下暂无更新内容，敬请期待</p>
            </div>

            <!-- 有数据状态 -->
            <div v-else>
              <div v-if="activeUpdateTab === 'normal'">
                <div class="update-card" v-for="(update, index) in filteredUpdates" :key="index">
                  <div class="update-header">
                    <h3 class="update-version">{{ update.version }}</h3>
                    <span class="update-date">{{ update.date }}</span>
                  </div>

                  <div v-if="update.newContent.length">
                    <h4 class="update-section-title">新增内容</h4>
                    <ul class="update-list">
                      <li v-for="(item, i) in update.newContent" :key="i">{{ item }}</li>
                    </ul>
                  </div>

                  <div v-if="update.optimizations.length">
                    <h4 class="update-section-title">优化调整</h4>
                    <ul class="update-list">
                      <li v-for="(item, i) in update.optimizations" :key="i">{{ item }}</li>
                    </ul>
                  </div>

                  <div v-if="update.fixes.length">
                    <h4 class="update-section-title">问题修复</h4>
                    <ul class="update-list">
                      <li v-for="(item, i) in update.fixes" :key="i">{{ item }}</li>
                    </ul>
                  </div>
                </div>

                <button
                    class="load-more"
                    @click="loadMoreUpdates('normal')"
                    v-if="visibleCounts.normal < (updateLogs.normal.length || 0)"
                >
                  查看更多更新记录 <i class="fa fa-angle-down"></i>
                </button>
              </div>

              <div v-if="activeUpdateTab === 'major'">
                <div class="update-card" v-for="(update, index) in filteredUpdates" :key="index">
                  <div class="update-header">
                    <h3 class="update-version">{{ update.version }}</h3>
                    <span class="update-date">{{ update.date }}</span>
                    <span class="update-tag">重大更新</span>
                  </div>

                  <div v-if="update.newContent.length">
                    <h4 class="update-section-title">全新内容</h4>
                    <ul class="update-list">
                      <li v-for="(item, i) in update.newContent" :key="i">{{ item }}</li>
                    </ul>
                  </div>
                </div>

                <button
                    class="load-more"
                    @click="loadMoreUpdates('major')"
                    v-if="visibleCounts.major < (updateLogs.major.length || 0)"
                >
                  查看更多重大更新 <i class="fa fa-angle-down"></i>
                </button>
              </div>

              <div v-if="activeUpdateTab === 'balance'">
                <div class="update-card" v-for="(update, index) in filteredUpdates" :key="index">
                  <div class="update-header">
                    <h3 class="update-version">{{ update.version }}</h3>
                    <span class="update-date">{{ update.date }}</span>
                  </div>

                  <div v-if="update.optimizations.length">
                    <h4 class="update-section-title">职业调整</h4>
                    <ul class="update-list">
                      <li v-for="(item, i) in update.optimizations" :key="i">{{ item }}</li>
                    </ul>
                  </div>
                </div>

                <button
                    class="load-more"
                    @click="loadMoreUpdates('balance')"
                    v-if="visibleCounts.balance < (updateLogs.balance.length || 0)"
                >
                  查看更多平衡调整 <i class="fa fa-angle-down"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 游戏公告 -->
      <section id="news" class="news-section">
        <div class="container">
          <div class="section-header">
            <h2 class="section-title">游戏公告</h2>
            <div class="section-divider"></div>
            <p class="section-subtitle">及时了解游戏最新动态、活动信息和维护公告。</p>
          </div>

          <div class="news-grid">
            <div class="news-card" v-for="news in gameNews" :key="news.id">
              <div class="news-image-container">
                <img :src="news.image" :alt="news.title" class="news-image">
                <span class="news-category" :class="news.categoryClass">{{ news.category }}</span>
              </div>
              <div class="news-content">
                <div class="news-date">
                  <i class="fa fa-calendar-o"></i> {{ news.date }}
                </div>
                <h3 class="news-title">{{ news.title }}</h3>
                <p class="news-summary">{{ news.summary }}</p>
                <button class="read-more">查看详情 <i class="fa fa-arrow-right"></i></button>
              </div>
            </div>
          </div>

          <button class="view-all-news">查看全部公告</button>
        </div>
      </section>

      <!-- 游戏下载入口 -->
      <section id="download" class="download-section">
        <div class="container">
          <div class="download-content">
            <h2 class="download-title">开始你的冒险之旅</h2>
            <p class="download-description">
              下载游戏客户端，立即加入 Epic Quest 的奇幻世界，与百万玩家一起探索未知的领域，挑战强大的敌人。
            </p>

            <div class="download-options">
              <button class="download-option">
                <i class="fa fa-windows"></i>
                <div class="download-info">
                  <div class="download-type">下载客户端</div>
                  <div class="download-platform">Windows 版</div>
                </div>
              </button>

              <button class="download-option">
                <i class="fa fa-apple"></i>
                <div class="download-info">
                  <div class="download-type">下载客户端</div>
                  <div class="download-platform">macOS 版</div>
                </div>
              </button>

              <button class="download-option">
                <i class="fa fa-mobile"></i>
                <div class="download-info">
                  <div class="download-type">扫码下载</div>
                  <div class="download-platform">移动版</div>
                </div>
              </button>
            </div>

            <div class="download-links">
              <a href="#" class="download-link"><i class="fa fa-key"></i> CDK 兑换</a>
              <span class="separator">|</span>
              <a href="#" class="download-link"><i class="fa fa-question-circle"></i> 下载帮助</a>
              <span class="separator">|</span>
              <a href="#" class="download-link"><i class="fa fa-history"></i> 版本说明</a>
            </div>
          </div>
        </div>
        <div class="background-glow glow-1"></div>
        <div class="background-glow glow-2"></div>
      </section>

      <!-- 用户中心入口 -->
      <section id="user-center" class="user-center-section">
        <div class="container">
          <div class="user-center-card">
            <div class="user-center-content">
              <h2 class="user-center-title">玩家账号中心</h2>
              <p class="user-center-description">
                登录你的账号，管理个人信息，查看游戏数据，修改安全设置，以及兑换CDK奖励。
              </p>

              <div class="user-features">
                <button class="user-feature">
                  <div class="feature-icon">
                    <i class="fa fa-user"></i>
                  </div>
                  <span>个人信息管理</span>
                </button>

                <button class="user-feature">
                  <div class="feature-icon">
                    <i class="fa fa-shield"></i>
                  </div>
                  <span>账号安全设置</span>
                </button>

                <button class="user-feature">
                  <div class="feature-icon">
                    <i class="fa fa-trophy"></i>
                  </div>
                  <span>游戏数据查询</span>
                </button>
              </div>

              <div class="user-actions">
                <button class="login-btn">登录账号</button>
                <button class="register-btn">注册账号</button>
              </div>
            </div>

            <div class="user-center-image">
              <img src="https://picsum.photos/id/141/800/1000" alt="玩家中心">
              <div class="image-overlay"></div>
            </div>
          </div>
        </div>
      </section>
    </main>

    <!-- 页脚 -->
    <footer class="footer">
      <div class="container">
        <div class="footer-content">
          <div class="footer-brand">
            <div class="logo">
              <div class="logo-icon">
                <i class="fa fa-gamepad"></i>
              </div>
              <span class="logo-text">Epic Quest</span>
            </div>
            <p class="brand-description">
              一款史诗级的开放世界奇幻冒险游戏，带你探索无尽的奇幻世界。
            </p>
            <div class="social-links">
              <a href="#" class="social-link"><i class="fa fa-weibo"></i></a>
              <a href="#" class="social-link"><i class="fa fa-wechat"></i></a>
              <a href="#" class="social-link"><i class="fa fa-qq"></i></a>
              <a href="#" class="social-link"><i class="fa fa-youtube-play"></i></a>
            </div>
          </div>

          <div class="footer-links">
            <div class="link-group">
              <h4 class="link-title">游戏资料</h4>
              <ul class="links">
                <li><a href="#" @click="scrollToSection('about')">游戏介绍</a></li>
                <li><a href="#">职业指南</a></li>
                <li><a href="#">地图攻略</a></li>
                <li><a href="#">副本攻略</a></li>
                <li><a href="#" @click="scrollToSection('updates')">更新日志</a></li>
              </ul>
            </div>

            <div class="link-group">
              <h4 class="link-title">玩家支持</h4>
              <ul class="links">
                <li><a href="#" @click="scrollToSection('user-center')">账号中心</a></li>
                <li><a href="#" @click="scrollToSection('download')">下载中心</a></li>
                <li><a href="#">CDK兑换</a></li>
                <li><a href="#">常见问题</a></li>
                <li><a href="#">联系客服</a></li>
              </ul>
            </div>

            <div class="link-group">
              <h4 class="link-title">关于我们</h4>
              <ul class="links">
                <li><a href="#">公司介绍</a></li>
                <li><a href="#">招贤纳士</a></li>
                <li><a href="#">隐私政策</a></li>
                <li><a href="#">用户协议</a></li>
                <li><a href="#">防沉迷系统</a></li>
              </ul>
            </div>
          </div>
        </div>

        <div class="footer-bottom">
          <p class="copyright">© 2023 Epic Quest 游戏官方网站 版权所有 | 京ICP备12345678号-1</p>
          <p class="disclaimer">抵制不良游戏 拒绝盗版游戏 注意自我保护 谨防受骗上当 适度游戏益脑 沉迷游戏伤身 合理安排时间 享受健康生活</p>
        </div>
      </div>
    </footer>

    <!-- 消息提示组件 -->
    <div class="notifications-container">
      <div
          class="notification"
          :class="['notification-' + notification.type, { 'notification-hidden': !notification.visible }]"
          v-for="notification in notifications"
          :key="notification.id"
      >
        <i class="fa" :class="[
          notification.type === 'success' ? 'fa-check-circle' : '',
          notification.type === 'error' ? 'fa-exclamation-circle' : '',
          notification.type === 'warning' ? 'fa-exclamation-triangle' : '',
          notification.type === 'info' ? 'fa-info-circle' : ''
        ]"></i>
        <span class="notification-message">{{ notification.message }}</span>
        <button class="notification-close" @click="closeNotification(notification.id)">
          <i class="fa fa-times"></i>
        </button>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 基础样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.app-container {
  font-family: 'Inter', system-ui, sans-serif;
  background-color: #0F172A;
  color: #F8FAFC;
  overflow-x: hidden;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 导航栏样式 */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: all 0.3s ease;
}

.navbar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 0;
}

.navbar-scrolled {
  background-color: rgba(15, 23, 42, 0.95);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background-color: #7E22CE;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.logo-text {
  font-size: 24px;
  font-weight: bold;
  font-family: 'Rajdhani', sans-serif;
  text-shadow: 0 0 10px rgba(126, 34, 206, 0.7);
}

.desktop-nav ul {
  display: flex;
  list-style: none;
  gap: 32px;
}

.nav-item {
  font-weight: 500;
  cursor: pointer;
  transition: color 0.3s ease;
  position: relative;
}

.nav-item.active,
.nav-item:hover {
  color: #F97316;
}

.nav-item.active::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #F97316;
}

.navbar-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.user-center-btn {
  background-color: #1E293B;
  color: #F8FAFC;
  border: none;
  padding: 8px 20px;
  border-radius: 20px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-center-btn:hover {
  background-color: rgba(126, 34, 206, 0.8);
}

.download-btn {
  background-color: #F97316;
  color: #F8FAFC;
  border: none;
  padding: 8px 20px;
  border-radius: 20px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 15px rgba(249, 115, 22, 0.2);
}

.download-btn:hover {
  background-color: rgba(249, 115, 22, 0.8);
}

.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  color: #F8FAFC;
  font-size: 24px;
  cursor: pointer;
}

.mobile-nav {
  display: none;
  background-color: #1E293B;
}

.mobile-nav ul {
  list-style: none;
  padding: 15px 0;
}

.mobile-nav-item {
  padding: 10px 20px;
  cursor: pointer;
  transition: color 0.3s ease;
}

.mobile-nav-item:hover,
.mobile-nav-item.active {
  color: #F97316;
}

/* 轮播图样式 */
.carousel-section {
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.carousel-container {
  height: 100%;
  position: relative;
}

.carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease;
}

.carousel-slide.active {
  opacity: 1;
}

.slide-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent, rgba(15, 23, 42, 0.3), #0F172A);
  z-index: 1;
}

.slide-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 0 20px 80px;
  max-width: 1200px;
  margin: 0 auto;
}

.slide-title {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-family: 'Rajdhani', sans-serif;
  font-weight: bold;
  line-height: 1.2;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  margin-bottom: 20px;
}

.slide-description {
  font-size: clamp(1rem, 2vw, 1.25rem);
  max-width: 600px;
  margin-bottom: 30px;
  color: rgba(248, 250, 252, 0.9);
}

.slide-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.cta-primary {
  background-color: #F97316;
  color: #F8FAFC;
  border: none;
  padding: 12px 32px;
  border-radius: 30px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(249, 115, 22, 0.2);
}

.cta-primary:hover {
  background-color: rgba(249, 115, 22, 0.9);
  transform: translateY(-2px);
}

.cta-secondary {
  background: transparent;
  color: #F8FAFC;
  border: 2px solid rgba(248, 250, 252, 0.3);
  padding: 12px 32px;
  border-radius: 30px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cta-secondary:hover {
  border-color: #F8FAFC;
}

.carousel-indicators {
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 3;
}

.indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #F8FAFC;
  opacity: 0.5;
  border: none;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.indicator.active {
  opacity: 1;
}

.scroll-down {
  position: absolute;
  bottom: 30px;
  left: 20px;
  background: none;
  border: none;
  color: rgba(248, 250, 252, 0.7);
  font-size: 36px;
  cursor: pointer;
  transition: color 0.3s ease;
  z-index: 3;
  animation: bounce 2s infinite;
  display: none;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

/* 通用 section 样式 */
.section-header {
  text-align: center;
  margin-bottom: 60px;
}

.section-title {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-family: 'Rajdhani', sans-serif;
  font-weight: bold;
  margin-bottom: 15px;
}

.section-divider {
  width: 80px;
  height: 3px;
  background-color: #7E22CE;
  margin: 0 auto 20px;
}

.section-subtitle {
  color: rgba(248, 250, 252, 0.7);
  max-width: 600px;
  margin: 0 auto;
}

/* 游戏介绍样式 */
.about-section {
  padding: 80px 0;
  background: linear-gradient(to bottom, #0F172A, #1E293B);
}

.about-content {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
}

.about-text {
  flex: 1;
  min-width: 300px;
}

.about-title {
  font-size: 28px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  margin-bottom: 20px;
}

.about-description {
  color: rgba(248, 250, 252, 0.8);
  line-height: 1.6;
  margin-bottom: 30px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.feature-card {
  background-color: rgba(15, 23, 42, 0.5);
  padding: 20px;
  border-radius: 8px;
  border: 1px solid rgba(126, 34, 206, 0.2);
  transition: all 0.3s ease;
}

.feature-card:hover {
  border-color: rgba(126, 34, 206, 0.5);
  transform: translateY(-5px);
}

.feature-icon {
  color: #7E22CE;
  font-size: 32px;
  margin-bottom: 15px;
}

.feature-title {
  font-weight: 600;
  margin-bottom: 10px;
}

.feature-desc {
  color: rgba(248, 250, 252, 0.7);
  font-size: 14px;
}

.learn-more {
  background: none;
  border: none;
  color: #F97316;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.learn-more:hover {
  color: rgba(249, 115, 22, 0.8);
}

.about-image {
  flex: 1;
  min-width: 300px;
  position: relative;
}

.main-image {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transition: transform 0.5s ease;
}

.about-image:hover .main-image {
  transform: scale(1.02);
}

.image-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  z-index: -1;
}

.glow-1 {
  top: 20px;
  right: -20px;
  width: 250px;
  height: 250px;
  background-color: rgba(126, 34, 206, 0.2);
}

.glow-2 {
  bottom: -20px;
  left: -20px;
  width: 200px;
  height: 200px;
  background-color: rgba(249, 115, 22, 0.2);
}

/* 游戏数据概览 */
.game-stats {
  padding: 60px 0;
  background-color: #0F172A;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 30px;
  text-align: center;
}

.stat-value {
  font-size: clamp(2rem, 4vw, 3rem);
  font-family: 'Rajdhani', sans-serif;
  font-weight: bold;
  color: #7E22CE;
  margin-bottom: 10px;
}

.stat-label {
  color: rgba(248, 250, 252, 0.7);
}

/* 更新日志样式 */
.updates-section {
  padding: 80px 0;
  background-color: #1E293B;
}

.updates-tabs {
  display: flex;
  border-bottom: 1px solid rgba(248, 250, 252, 0.1);
  margin-bottom: 40px;
  overflow-x: auto;
}

.update-tab {
  background: none;
  border: none;
  color: rgba(248, 250, 252, 0.6);
  padding: 12px 24px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.update-tab.active {
  color: #F97316;
  border-bottom: 2px solid #F97316;
}

.update-tab:hover:not(.active) {
  color: #F8FAFC;
}

.update-card {
  background-color: #0F172A;
  border-radius: 12px;
  padding: 25px;
  margin-bottom: 25px;
  border: 1px solid rgba(248, 250, 252, 0.05);
  transition: all 0.3s ease;
}

.update-card:hover {
  border-color: rgba(126, 34, 206, 0.2);
}

.update-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  gap: 10px;
}

.update-version {
  font-size: 20px;
  font-weight: 600;
}

.update-date {
  background-color: rgba(126, 34, 206, 0.2);
  color: #7E22CE;
  font-size: 14px;
  padding: 3px 10px;
  border-radius: 12px;
}

.update-tag {
  background-color: rgba(249, 115, 22, 0.2);
  color: #F97316;
  font-size: 14px;
  padding: 3px 10px;
  border-radius: 12px;
}

.update-section-title {
  font-weight: 600;
  margin-bottom: 10px;
  color: rgba(248, 250, 252, 0.9);
}

.update-list {
  margin-bottom: 20px;
  padding-left: 20px;
}

.update-list li {
  color: rgba(248, 250, 252, 0.7);
  margin-bottom: 8px;
}

.load-more {
  width: 100%;
  background-color: #0F172A;
  border: 1px solid rgba(248, 250, 252, 0.1);
  color: rgba(248, 250, 252, 0.7);
  padding: 12px;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.load-more:hover {
  color: #F8FAFC;
  border-color: rgba(248, 250, 252, 0.2);
}

/* 加载状态样式 */
.loading-state {
  text-align: center;
  padding: 60px 20px;
}

.spinner {
  width: 40px;
  height: 40px;
  margin: 0 auto 20px;
  border: 4px solid rgba(126, 34, 206, 0.2);
  border-top: 4px solid #7E22CE;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 无数据状态样式 */
.no-data {
  text-align: center;
  padding: 60px 20px;
  color: rgba(248, 250, 252, 0.6);
}

.no-data i {
  font-size: 60px;
  margin-bottom: 20px;
  color: rgba(126, 34, 206, 0.3);
}

.no-data h3 {
  font-size: 20px;
  margin-bottom: 10px;
  color: rgba(248, 250, 252, 0.8);
}

/* 游戏公告样式 */
.news-section {
  padding: 80px 0;
  background-color: #0F172A;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px;
  margin-bottom: 40px;
}

.news-card {
  background-color: #1E293B;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.news-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(126, 34, 206, 0.1);
}

.news-image-container {
  position: relative;
  height: 200px;
}

.news-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.news-card:hover .news-image {
  transform: scale(1.05);
}

.news-category {
  position: absolute;
  top: 15px;
  left: 15px;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 12px;
  font-weight: 500;
}

.news-category.event {
  background-color: rgba(249, 115, 22, 0.8);
  color: #F8FAFC;
}

.news-category.maintenance {
  background-color: rgba(239, 68, 68, 0.8);
  color: #F8FAFC;
}

.news-category.tournament {
  background-color: rgba(59, 130, 246, 0.8);
  color: #F8FAFC;
}

.news-content {
  padding: 20px;
}

.news-date {
  color: rgba(248, 250, 252, 0.5);
  font-size: 14px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.news-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 15px;
  transition: color 0.3s ease;
}

.news-card:hover .news-title {
  color: #F97316;
}

.news-summary {
  color: rgba(248, 250, 252, 0.7);
  font-size: 14px;
  margin-bottom: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.read-more {
  background: none;
  border: none;
  color: #7E22CE;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.3s ease;
  display: flex;
  align-items: center;
  gap: 5px;
}

.read-more:hover {
  color: #F97316;
}

.view-all-news {
  display: block;
  margin: 0 auto;
  background: transparent;
  border: 1px solid rgba(126, 34, 206, 0.5);
  color: #7E22CE;
  padding: 12px 30px;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.view-all-news:hover {
  background-color: #7E22CE;
  color: #F8FAFC;
  border-color: #7E22CE;
}

/* 下载区域样式 */
.download-section {
  padding: 100px 0;
  background: linear-gradient(to right, rgba(126, 34, 206, 0.2), rgba(249, 115, 22, 0.2));
  position: relative;
  overflow: hidden;
}

.background-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  z-index: 0;
}

.download-section .glow-1 {
  top: -100px;
  left: -100px;
  width: 400px;
  height: 400px;
  background-color: rgba(126, 34, 206, 0.1);
}

.download-section .glow-2 {
  bottom: -200px;
  right: -100px;
  width: 400px;
  height: 400px;
  background-color: rgba(249, 115, 22, 0.1);
}

.download-content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

.download-title {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-family: 'Rajdhani', sans-serif;
  font-weight: bold;
  margin-bottom: 20px;
}

.download-description {
  color: rgba(248, 250, 252, 0.8);
  font-size: 18px;
  margin-bottom: 40px;
}

.download-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-bottom: 40px;
}

.download-option {
  background-color: #1E293B;
  border: none;
  border-radius: 12px;
  padding: 20px 30px;
  display: flex;
  align-items: center;
  gap: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.download-option:hover {
  background-color: #0F172A;
  transform: translateY(-5px);
}

.download-option i {
  font-size: 36px;
}

.download-info {
  text-align: left;
}

.download-type {
  color: rgba(248, 250, 252, 0.6);
  font-size: 12px;
}

.download-platform {
  font-weight: 600;
}

.download-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

.download-link {
  color: rgba(248, 250, 252, 0.7);
  text-decoration: none;
  transition: color 0.3s ease;
  display: flex;
  align-items: center;
  gap: 5px;
}

.download-link:hover {
  color: #F97316;
}

.separator {
  color: rgba(248, 250, 252, 0.3);
}

/* 用户中心样式 */
.user-center-section {
  padding: 80px 0;
  background-color: #1E293B;
}

.user-center-card {
  background-color: #0F172A;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.user-center-content {
  flex: 1;
  min-width: 300px;
  padding: 40px;
}

.user-center-title {
  font-size: 28px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: bold;
  margin-bottom: 20px;
}

.user-center-description {
  color: rgba(248, 250, 252, 0.7);
  margin-bottom: 30px;
  line-height: 1.6;
}

.user-features {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 30px;
}

.user-feature {
  background-color: #1E293B;
  border: none;
  border-radius: 8px;
  padding: 15px;
  display: flex;
  align-items: center;
  gap: 15px;
  color: #F8FAFC;
  text-align: left;
  cursor: pointer;
  transition: all 0.3s ease;
}

.user-feature:hover {
  background-color: rgba(126, 34, 206, 0.1);
}

.user-feature .feature-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(126, 34, 206, 0.2);
  color: #7E22CE;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.user-actions {
  display: flex;
  gap: 15px;
}

.login-btn {
  flex: 1;
  background-color: #F97316;
  color: #F8FAFC;
  border: none;
  padding: 12px;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.login-btn:hover {
  background-color: rgba(249, 115, 22, 0.9);
}

.register-btn {
  flex: 1;
  background: transparent;
  color: #F8FAFC;
  border: 1px solid rgba(248, 250, 252, 0.2);
  padding: 12px;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.register-btn:hover {
  border-color: rgba(248, 250, 252, 0.4);
}

.user-center-image {
  flex: 1;
  min-width: 300px;
  position: relative;
  display: none;
}

.user-center-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #0F172A, transparent);
}

/* 页脚样式 */
.footer {
  background-color: #0F172A;
  border-top: 1px solid rgba(248, 250, 252, 0.05);
  padding: 60px 0 30px;
}

.footer-content {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  margin-bottom: 40px;
}

.footer-brand {
  flex: 1;
  min-width: 300px;
}

.brand-description {
  color: rgba(248, 250, 252, 0.6);
  margin-bottom: 20px;
  line-height: 1.6;
}

.social-links {
  display: flex;
  gap: 15px;
}

.social-link {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #1E293B;
  color: rgba(248, 250, 252, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.3s ease;
}

.social-link:hover {
  background-color: #7E22CE;
  color: #F8FAFC;
}

.footer-links {
  flex: 2;
  min-width: 300px;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}

.link-group {
  flex: 1;
  min-width: 150px;
}

.link-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
}

.links {
  list-style: none;
}

.links li {
  margin-bottom: 10px;
}

.links a {
  color: rgba(248, 250, 252, 0.6);
  text-decoration: none;
  transition: color 0.3s ease;
}

.links a:hover {
  color: #F97316;
}

.footer-bottom {
  padding-top: 30px;
  border-top: 1px solid rgba(248, 250, 252, 0.05);
  text-align: center;
}

.copyright {
  color: rgba(248, 250, 252, 0.4);
  font-size: 14px;
  margin-bottom: 10px;
}

.disclaimer {
  color: rgba(248, 250, 252, 0.4);
  font-size: 12px;
  line-height: 1.6;
}

/* 消息提示样式 */
.notifications-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.notification {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  animation: slideIn 0.3s ease forwards;
  max-width: 350px;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.notification-hidden {
  transform: translateX(100%);
  opacity: 0;
}

.notification-info {
  background-color: #3B82F6;
}

.notification-success {
  background-color: #10B981;
}

.notification-warning {
  background-color: #F59E0B;
}

.notification-error {
  background-color: #EF4444;
}

.notification-message {
  flex: 1;
}

.notification-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  font-size: 16px;
  transition: color 0.2s ease;
}

.notification-close:hover {
  color: white;
}

/* 响应式调整 */
@media (min-width: 768px) {
  .scroll-down {
    display: block;
  }

  .user-center-image {
    display: block;
  }
}

@media (max-width: 767px) {
  .desktop-nav,
  .user-center-btn {
    display: none;
  }

  .mobile-menu-btn {
    display: block;
  }

  .mobile-nav {
    display: block;
  }

  .slide-content {
    padding-bottom: 60px;
  }

  .about-content {
    flex-direction: column;
  }

  .about-text {
    order: 2;
  }

  .about-image {
    order: 1;
  }

  .user-actions {
    flex-direction: column;
  }
}
</style>